<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="" />
  <title></title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">

  </head>
  <body>
  <!-- Start Page Loading -->
  <div class="loading"><img src="img/loading.gif" alt="loading-img"></div>
  <!-- End Page Loading -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
  <!-- START TOP -->
  <div id="top" class="clearfix">

    <!-- Start App Logo -->
    <div class="applogo">
      <a href="index.html" class="logo"><img src="img/logo.png" alt="modern"></a>
    </div>
    <!-- End App Logo -->
    
     <!-- Start Sidebar Show Hide Button -->
    <a href="#" class="sidebar-open-button"><i class="fa fa-bars"></i></a>
    <a href="#" class="sidebar-open-button-mobile"><i class="fa fa-bars"></i></a>
    <!-- End Sidebar Show Hide Button -->
    
     <!-- page title -->
    <h1 class="title">Dashboard</h1>
      <!-- End page title -->

   
    
    

   
    
     


    <!-- Start Sidepanel Show-Hide Button -->
    <a href="#sidepanel" class="sidepanel-open-button"><i class="fa fa-th-large"></i></a>
    <!-- End Sidepanel Show-Hide Button -->

    <!-- Start Top Right -->
    <ul class="top-right">
 <!-- Start Searchbox -->
    <form class="searchform">
      <input type="text" class="searchbox" id="searchbox" placeholder="Search">
      <span class="searchbutton"><i class="fa fa-search"></i></span>
    </form>
    <!-- End Searchbox -->
    <li class="dropdown link">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle hdbutton">Add New <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-list">
          <li><a href="#"><i class="fa falist fa-suitcase"></i>Product</a></li>
          <li><a href="#"><i class="fa falist fa-comments-o"></i>Blog Post</a></li>
          <li><a href="#"><i class="fa falist fa-image"></i>Image Gallery</a></li>
          <li><a href="#"><i class="fa falist fa-video-camera"></i>Video Gallery</a></li>
        </ul>
    </li>

    <li class="link">
      <a href="#" class="notifications">6</a>
    </li>
<li class="dropdown link">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle profilebox"><img src="img/profileimg.png" alt="img"><b>Stephen Doe</b><span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-list dropdown-menu-right">
          <li role="presentation" class="dropdown-header">Profile</li>
          <li><a href="#"><i class="fa falist fa-inbox"></i>Inbox<span class="badge label-danger">4</span></a></li>
          <li><a href="#"><i class="fa falist fa-file-o"></i>Files</a></li>
          <li><a href="#"><i class="fa falist fa-wrench"></i>Settings</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa falist fa-lock"></i> Lockscreen</a></li>
          <li><a href="#"><i class="fa falist fa-power-off"></i> Logout</a></li>
        </ul>
    </li>
    

    </ul>
    <!-- End Top Right -->

  </div>
  <!-- END TOP -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 

 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START SIDEBAR -->
<div class="sidebar clearfix">

<ul class="sidebar-panel nav">
  <li><a href="index.html"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-red">2</span></a></li>
  <li><a href="mailbox.html"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Email<span class="label label-default">23</span></a></li>
  <li><a href="#"><span class="icon color7"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a>
    <ul>
      <li><a href="icons.html">Icons</a></li>
      <li><a href="tabs.html">Tabs</a></li>
      <li><a href="buttons.html">Buttons</a></li>
      <li><a href="panels.html">Panels</a></li>
      <li><a href="notifications.html">Notifications<span class="label label-danger">NEW</span></a></li>
      <li><a href="modal-boxes.html">Modal Boxes</a></li>
      <li><a href="progress-bars.html">Progress Bars</a></li>
      <li><a href="others.html">Others</a></li>
    </ul>
  </li>
  <li><a href="charts.html"><span class="icon color8"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
  <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a>
    <ul>
      <li><a href="basic-table.html">Basic Tables</a></li>
      <li><a href="data-table.html">Data Tables</a></li>
    </ul>
  </li>
  <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a>
    <ul>
      <li><a href="form-elements.html">Form Elements</a></li>
      <li><a href="layouts.html">Form Layouts</a></li>
      <li><a href="text-editors.html">Text Editors</a></li>
    </ul>
  </li>
  <li><a href="widgets.html"><span class="icon color11"><i class="fa fa-diamond"></i></span>Widgets<span class="label label-blue">7</span></a></li>
  <li><a href="calendar.html"><span class="icon color8"><i class="fa fa-calendar-o"></i></span>Calendar<span class="label label-danger">NEW</span></a></li>

  <li><a href="#"><span class="icon color14"><i class="fa fa-paper-plane-o"></i></span>Pages<span class="caret"></span></a>
    <ul>
      <li><a href="social-profile.html">Social Profile</a></li>
      <li><a href="invoice.html">Invoice<span class="label label-danger">NEW</span></a></li>
      <li><a href="login.html">Login Page</a></li>
      <li><a href="register.html">Register</a></li>
      <li><a href="forgot-password.html">Forgot Password</a></li>
      <li><a href="lockscreen.html">Lockscreen</a></li>
      <li><a href="blank.html">Blank Page</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="404.html">404 Page</a></li>
      <li><a href="500.html">500 Page</a></li>
    </ul>
  </li>
    <li><a href="typography.html"><span class="icon color12"><i class="fa fa-font"></i></span>Typography</a></li>
  <li><a href="grid.html"><span class="icon color15"><i class="fa fa-columns"></i></span>Grid</a></li>
  <li><a href="customizable.html"><span class="icon color10"><i class="fa fa-lightbulb-o"></i></span>Customizable</a></li>
  <li><a href="helper-classes.html"><span class="icon color8"><i class="fa fa-code"></i></span>Helper Classes</a></li>
</ul>
<div class="sidebar-plan">
  Bandwidth<a href="#" class="link">60%</a>
  <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>
</div>

</div>


</div>
<!-- END SIDEBAR -->
<!-- //////////////////////////////////////////////////////////////////////////// --> 

 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTENT -->
<div class="content">

  <!-- Start Page breadcrumb -->
  <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="index.html">Dashboard</a></li>
        <li><a href="#">UI Elements</a></li>
        <li class="active">Buttons</li>
      </ol>

   
  </div>
  <!-- End Page breadcrumb -->
 
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding container-widget">



  <div class="row btndiv">

    <div class="col-md-12">
      <div class="panel panel-default">
        
            <div class="panel-body">

              <!-- Start left -->
              <div class="col-md-12 col-lg-6">

                <h4>Classic</h4>
                <p>Classic button style <code>btn</code> example <code>btn-default</code></p>
                <p>There is also option colors example <code>btn-option1</code> or <code>btn-option5</code></p>
                <a href="#" class="btn btn-default">Default</a>
                <a href="#" class="btn btn-primary">Primary</a>
                <a href="#" class="btn btn-success">Success</a>
                <a href="#" class="btn btn-info">Info</a>
                <a href="#" class="btn btn-warning">Warning</a>
                <a href="#" class="btn btn-danger">Danger</a>
                <a href="#" class="btn btn-option1">Option 1</a>
                <a href="#" class="btn btn-option2">Option 2</a>
                <a href="#" class="btn btn-option3">Option 3</a>
                <a href="#" class="btn btn-option4">Option 4</a>
                <a href="#" class="btn btn-option5">Option 5</a>
                <a href="#" class="btn">Basic</a>
                <a href="#" class="btn btn-light">Light</a>

                <hr>

                <h4>Rounded</h4>
                <p>Rounded buttons. Just add <code>btn-rounded</code></p>
                <p>All colors support rounded.</p>
                <a href="#" class="btn btn-rounded btn-default">Default</a>
                <a href="#" class="btn btn-rounded btn-primary">Primary</a>
                <a href="#" class="btn btn-rounded btn-success">Success</a>
                <a href="#" class="btn btn-rounded btn-info">Info</a>
                <a href="#" class="btn btn-rounded btn-warning">Warning</a>
                <a href="#" class="btn btn-rounded btn-danger">Danger</a>
                <a href="#" class="btn btn-rounded btn-option1">Option 1</a>
                <a href="#" class="btn btn-rounded btn-option2">Option 2</a>
                <a href="#" class="btn btn-rounded btn-option3">Option 3</a>
                <a href="#" class="btn btn-rounded btn-option4">Option 4</a>
                <a href="#" class="btn btn-rounded btn-option5">Option 5</a>
                <a href="#" class="btn btn-rounded">Basic</a>
                <a href="#" class="btn btn-rounded btn-light">Light</a>

                <hr>

                <h4>Square</h4>
                <p>Square button style with <code>btn-square</code></p>
                <a href="#" class="btn btn-square btn-default">Default</a>
                <a href="#" class="btn btn-square btn-primary">Primary</a>
                <a href="#" class="btn btn-square btn-success">Success</a>
                <a href="#" class="btn btn-square btn-info">Info</a>
                <a href="#" class="btn btn-square btn-warning">Warning</a>
                <a href="#" class="btn btn-square btn-danger">Danger</a>
                <a href="#" class="btn btn-square btn-option1">Option 1</a>
                <a href="#" class="btn btn-square btn-option2">Option 2</a>
                <a href="#" class="btn btn-square btn-option3">Option 3</a>
                <a href="#" class="btn btn-square btn-option4">Option 4</a>
                <a href="#" class="btn btn-square btn-option5">Option 5</a>
                <a href="#" class="btn btn-square">Basic</a>
                <a href="#" class="btn btn-square btn-light">Light</a>

                <hr>

                <h4>Sizing</h4>
                <p>You can easily change your button size.</p>
                <p>Extra Small <code>btn-xs</code>, Small <code>btn-sm</code>, Normal with no size, Large <code>btn-lg</code>, Extra Large <code>btn-xl</code></p>
                <a href="#" class="btn btn-default btn-xs">Extra Small</a>
                <a href="#" class="btn btn-default btn-sm">Small</a>
                <a href="#" class="btn btn-default">Normal</a>
                <a href="#" class="btn btn-default btn-lg">Large</a>
                <a href="#" class="btn btn-default btn-xl">Extra Large</a>

                <hr>

                <h4>Block Button</h4>
                <p>How to make a block button? Easy add <code>btn-block</code> on your button class.</p>
                <button type="button" class="btn btn-default btn-block">Block level button</button>
                <button type="button" class="btn btn-light btn-xs btn-block">Block level button</button>

                <hr>

                <h4>Icon Button</h4>
                <p>Here is Icon buttons. You can create icon button with Font-Awesome. <code>btn-icon</code></p>
                <button type="button" class="btn btn-default btn-icon"><i class="fa fa-envelope-o"></i></button>
                <button type="button" class="btn btn-danger btn-icon"><i class="fa fa-file"></i></button>
                <button type="button" class="btn btn-option3 btn-icon"><i class="fa fa-cloud"></i></button>
                <button type="button" class="btn btn-rounded btn-default btn-icon"><i class="fa fa-envelope-o"></i></button>
                <button type="button" class="btn btn-rounded btn-danger btn-icon"><i class="fa fa-file"></i></button>
                <button type="button" class="btn btn-rounded btn-option3 btn-icon"><i class="fa fa-cloud"></i></button>
                <button type="button" class="btn btn-square btn-default btn-icon"><i class="fa fa-envelope-o"></i></button>
                <button type="button" class="btn btn-square btn-danger btn-icon"><i class="fa fa-file"></i></button>
                <button type="button" class="btn btn-square btn-option3 btn-icon"><i class="fa fa-cloud"></i></button>


              </div>
              <!-- End left -->

              <!-- Start right -->
              <div class="col-md-12 col-lg-6">

                <h4>With Icons</h4>
                <p>Just put an icon on your button. Its gonna auto size and position itself.</p>
                <a href="#" class="btn btn-default"><i class="fa fa-picture-o"></i>Default</a>
                <a href="#" class="btn btn-primary"><i class="fa fa-arrows"></i>Primary</a>
                <a href="#" class="btn btn-success"><i class="fa fa-camera"></i>Success</a>
                <a href="#" class="btn btn-info"><i class="fa fa-comments"></i>Info</a>
                <a href="#" class="btn btn-warning"><i class="fa fa-warning"></i>Warning</a>
                <a href="#" class="btn btn-danger"><i class="fa fa-check"></i>Danger</a>
                <a href="#" class="btn btn-option1"><i class="fa fa-leaf"></i>Option 1</a>
                <a href="#" class="btn btn-option2"><i class="fa fa-info"></i>Option 2</a>
                <a href="#" class="btn btn-option3"><i class="fa fa-paper-plane-o"></i>Option 3</a>
                <a href="#" class="btn btn-option4"><i class="fa fa-star"></i>Option 4</a>
                <a href="#" class="btn btn-option5"><i class="fa fa-user"></i>Option 5</a>
                <a href="#" class="btn"><i class="fa fa-cab"></i>Basic</a>
                <a href="#" class="btn btn-light"><i class="fa fa-file-o"></i>Light</a>

                <hr>

                <h4>Groups</h4>
                <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code></p>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-light">Left</button>
                  <button type="button" class="btn btn-light">Middle</button>
                  <button type="button" class="btn btn-light">Right</button>
                </div>
                <br>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">Left</button>
                  <button type="button" class="btn btn-danger">Middle</button>
                  <button type="button" class="btn btn-success">Right<span class="badge">10</span></button>
                </div>
                <br>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-light"><i class="fa fa-user"></i>My Profile</button>
                  <button type="button" class="btn btn-light"><i class="fa fa-envelope-o"></i>Messages<span class="badge">13</span></button>
                  <button type="button" class="btn btn-light"><i class="fa fa-cog"></i>Settings</button>
                </div>
                <br>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-light">1</button>
                  <button type="button" class="btn btn-light">2</button>
                  <button type="button" class="btn btn-light">3</button>
                  <button type="button" class="btn btn-light">4</button>
                </div>

                <hr>

                <h4>Button Dropdowns</h4>
                <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
                  <!-- dropdown 1 -->
                  <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                      Dropdown
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                  </div>
                  <!-- dropdown 2 -->
                  <div class="btn-group">
                    <button type="button" class="btn btn-light">Action</button>
                    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      <span class="caret"></span>
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>

                <hr>

                <h4>Justified button groups</h4>
                <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default">Left</button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-warning">Middle</button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-option4">Right</button>
                  </div>
                </div>

                <hr>

                <h4>Social Button</h4>
                <p>Make social buttons with colors and icons.</p>
                  <button type="button" class="btn btn-default"><i class="fa fa-twitter"></i>Sign in with Twitter</button>
                  <button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i>Sign in with Facebook</button>
                  <button type="button" class="btn btn-danger"><i class="fa fa-google"></i>Sign in with Google</button>

                <h4>Examples</h4>
                <p>Create your style.</p>
                  <button type="button" class="btn btn-option3 btn-xs"><i class="fa fa-plus"></i>Show More</button>
                  <button type="button" class="btn btn-option1 btn-xs"><i class="fa fa-thumbs-up"></i>1,102</button>
                  <button type="button" class="btn btn-danger btn-icon btn-sm"><i class="fa fa-heart"></i><span class="badge">12</span></button>
                  <button type="button" class="btn btn-success btn-sm"><i class="fa fa-cloud"></i>Upload File</button>
                  <br>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-icon btn-light"><i class="fa fa-align-left"></i></button>
                  <button type="button" class="btn btn-icon btn-light"><i class="fa fa-align-center"></i></button>
                  <button type="button" class="btn btn-icon btn-light"><i class="fa fa-align-right"></i></button>
                </div>

              </div>
              <!-- End right -->

            </div>
      </div>
    </div>
  </div>




</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- Start Footer -->
<div class="row footer">
  <div class="col-md-6 text-left">
  Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.aspku.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
  </div>
  <div class="col-md-6 text-right">
    
  </div> 
</div>
<!-- End Footer -->

</div>
<!-- End Content -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 

<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START SIDEPANEL -->
<div role="tabpanel" class="sidepanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#today" aria-controls="today" role="tab" data-toggle="tab">TODAY</a></li>
    <li role="presentation"><a href="#tasks" aria-controls="tasks" role="tab" data-toggle="tab">TASKS</a></li>
    <li role="presentation"><a href="#chat" aria-controls="chat" role="tab" data-toggle="tab">CHAT</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">

    <!-- Start Today -->
    <div role="tabpanel" class="tab-pane active" id="today">

      <div class="sidepanel-m-title">
        Today
        <span class="left-icon"><a href="#"><i class="fa fa-refresh"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-file-o"></i></a></span>
      </div>

      <div class="gn-title">NEW</div>

      <ul class="list-w-title">
        <li>
          <a href="#">
            <span class="label label-danger">ORDER</span>
            <span class="date">9 hours ago</span>
            <h4>New Jacket 2.0</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-success">COMMENT</span>
            <span class="date">14 hours ago</span>
            <h4>Bill Jackson</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-info">MEETING</span>
            <span class="date">at 2:30 PM</span>
            <h4>Developer Team</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-warning">EVENT</span>
            <span class="date">3 days left</span>
            <h4>Birthday Party</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
      </ul>

    </div>
    <!-- End Today -->

    <!-- Start Tasks -->
    <div role="tabpanel" class="tab-pane" id="tasks">

      <div class="sidepanel-m-title">
        To-do List
        <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
      </div>

      <div class="gn-title">TODAY</div>

      <ul class="todo-list">
        <li class="checkbox checkbox-primary">
          <input id="checkboxside1" type="checkbox"><label for="checkboxside1">Add new products</label>
        </li>
        
        <li class="checkbox checkbox-primary">
          <input id="checkboxside2" type="checkbox"><label for="checkboxside2"><b>May 12, 6:30 pm</b> Meeting with Team</label>
        </li>
        
        <li class="checkbox checkbox-warning">
          <input id="checkboxside3" type="checkbox"><label for="checkboxside3">Design Facebook page</label>
        </li>
        
        <li class="checkbox checkbox-info">
          <input id="checkboxside4" type="checkbox"><label for="checkboxside4">Send Invoice to customers</label>
        </li>
        
        <li class="checkbox checkbox-danger">
          <input id="checkboxside5" type="checkbox"><label for="checkboxside5">Meeting with developer team</label>
        </li>
      </ul>

      <div class="gn-title">TOMORROW</div>
      <ul class="todo-list">
        <li class="checkbox checkbox-warning">
          <input id="checkboxside6" type="checkbox"><label for="checkboxside6">Redesign our company blog</label>
        </li>
        
        <li class="checkbox checkbox-success">
          <input id="checkboxside7" type="checkbox"><label for="checkboxside7">Finish client work</label>
        </li>
        
        <li class="checkbox checkbox-info">
          <input id="checkboxside8" type="checkbox"><label for="checkboxside8">Call Johnny from Developer Team</label>
        </li>

      </ul>
    </div>    
    <!-- End Tasks -->

    <!-- Start Chat -->
    <div role="tabpanel" class="tab-pane" id="chat">

      <div class="sidepanel-m-title">
        Friend List
        <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
      </div>

      <div class="gn-title">ONLINE MEMBERS (3)</div>
      <ul class="group">
        <li class="member"><a href="#"><img src="img/profileimg.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status online"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg2.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status busy"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg3.png" alt="img"><b>Fred Stonefield</b>New York</a><span class="status away"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg4.png" alt="img"><b>Chris M. Johnson</b>California</a><span class="status online"></span></li>
      </ul>

      <div class="gn-title">OFFLINE MEMBERS (8)</div>
     <ul class="group">
        <li class="member"><a href="#"><img src="img/profileimg5.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status offline"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg6.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status offline"></span></li>
      </ul>

      <form class="search">
        <input type="text" class="form-control" placeholder="Search a Friend...">
      </form>
    </div>
    <!-- End Chat -->

  </div>

</div>
<!-- END SIDEPANEL -->
<!-- //////////////////////////////////////////////////////////////////////////// --> 


<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>


</body>
</html>